<script>
import echarts from 'echarts'
import BaseChart from '@/components/BaseChart.vue'
import { deepClone } from '@/utils'

export default {
  components: {
    BaseChart,
  },
  data() {
    return {
      seriesList: [],
      option: {
        title: {
          text: '用户付费率走势图',
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: { show: false },
          data: [],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#eee',
            },
          },
          axisLabel: {
            show: true,
            color: '#666',
          },
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: '#999',
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee',
            },
          },
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
          },
        ],
      },
    }
  },
  props: {
    data: {
      type: Array,
    },
  },
  watch: {
    data(row) {
      this.setEchartData(row)
    },
  },
  methods: {
    setEchartData(row) {
      this.option.xAxis.data = []
      this.option.series = []
      const deepRow = deepClone(row)
      let seriesData = {
        name: '活跃用户数',
        type: 'line',
        stack: 'Total',
        data: [],
      }
      deepRow?.forEach(item => {
        this.option.xAxis.data.push(item?.DayNmu)
        seriesData.data.push(item?.ActNum)
      })
      this.option.series.push(seriesData)
    },
  },
}
</script>

<template>
  <base-chart
    width="100%"
    height="100%"
    :option="option">
  </base-chart>
</template>

<style lang="scss" scoped></style>
